<template>
  <div class="templates-content">
    <div class="templates-header">
      <h1>二维码模板</h1>
      <p>选择最适合您品牌的二维码展示模板</p>
    </div>

    <div class="templates-grid">
      <!-- 模板1: 经典商务 -->
      <div class="template-card">
        <div class="template-preview">
          <div class="template-classic demo-template">
            <div class="brand-header">
              <h2 class="company-name">AnyPay</h2>
              <p class="company-slogan">安全便捷的支付体验</p>
            </div>
            <div class="qrcode-wrapper">
              <div class="demo-qrcode"></div>
            </div>
            <div class="payment-methods">
              <div class="method-item">
                <div class="method-icon wechat-icon"></div>
                <span>微信支付</span>
              </div>
              <div class="method-item">
                <div class="method-icon alipay-icon"></div>
                <span>支付宝</span>
              </div>
              <div class="method-item">
                <div class="method-icon unionpay-icon"></div>
                <span>云闪付</span>
              </div>
            </div>
          </div>
        </div>
        <div class="template-info">
          <div class="template-info-content">
            <h3>经典商务</h3>
            <p>专业稳重的商务风格，适合企业和商户使用</p>
          </div>
          <div class="template-actions">
            <a-button type="primary" @click="previewTemplate('classic')" class="preview-btn">
              <template #icon><EyeOutlined /></template>
              预览
            </a-button>
          </div>
        </div>
      </div>

      <!-- 模板2: 时尚渐变 -->
      <div class="template-card">
        <div class="template-preview">
          <div class="template-gradient demo-template">
            <div class="gradient-bg">
              <div class="brand-header">
                <h2 class="company-name">AnyPay</h2>
                <p class="company-slogan">创新支付，引领未来</p>
              </div>
              <div class="qrcode-wrapper">
                <div class="qrcode-frame">
                  <div class="demo-qrcode small"></div>
                </div>
              </div>
            </div>
            <div class="payment-methods gradient-methods">
              <div class="method-item">
                <span class="method-icon">💬</span>
                <span>微信</span>
              </div>
              <div class="method-item">
                <span class="method-icon">💰</span>
                <span>支付宝</span>
              </div>
              <div class="method-item">
                <span class="method-icon">💳</span>
                <span>云闪付</span>
              </div>
            </div>
          </div>
        </div>
        <div class="template-info">
          <div class="template-info-content">
            <h3>时尚渐变</h3>
            <p>现代时尚的渐变设计，吸引年轻用户群体</p>
          </div>
          <div class="template-actions">
            <a-button type="primary" @click="previewTemplate('gradient')" class="preview-btn">
              <template #icon><EyeOutlined /></template>
              预览
            </a-button>
          </div>
        </div>
      </div>

      <!-- 模板3: 简约现代 -->
      <div class="template-card">
        <div class="template-preview">
          <div class="template-minimal demo-template">
            <div class="minimal-container">
              <div class="brand-section">
                <div class="company-logo">A</div>
                <h3 class="company-name">AnyPay</h3>
              </div>
              <div class="qrcode-section">
                <div class="demo-qrcode mini"></div>
              </div>
              <div class="payment-badges">
                <span class="badge wechat">微信</span>
                <span class="badge alipay">支付宝</span>
                <span class="badge unionpay">云闪付</span>
              </div>
            </div>
          </div>
        </div>
        <div class="template-info">
          <div class="template-info-content">
            <h3>简约现代</h3>
            <p>简洁清爽的现代设计，突出核心功能</p>
          </div>
          <div class="template-actions">
            <a-button type="primary" @click="previewTemplate('minimal')" class="preview-btn">
              <template #icon><EyeOutlined /></template>
              预览
            </a-button>
          </div>
        </div>
      </div>

      <!-- 模板4: 品牌突出 -->
      <div class="template-card">
        <div class="template-preview">
          <div class="template-brand demo-template">
            <div class="brand-showcase">
              <div class="brand-banner">
                <div class="brand-logo-large">An</div>
                <div class="brand-info">
                  <h1 class="brand-title">AnyPay</h1>
                  <p class="brand-tagline">专业支付解决方案</p>
                </div>
              </div>
              <div class="qrcode-area">
                <div class="qr-container">
                  <div class="demo-qrcode mini"></div>
                  <div class="scan-tip">扫码支付</div>
                </div>
              </div>
              <div class="supported-payments">
                <div class="payment-row">
                  <div class="payment-icon wechat-brand">🟢</div>
                  <div class="payment-icon alipay-brand">🔵</div>
                  <div class="payment-icon unionpay-brand">🟠</div>
                </div>
                <p class="support-text">支持微信、支付宝、云闪付</p>
              </div>
            </div>
          </div>
        </div>
        <div class="template-info">
          <div class="template-info-content">
            <h3>品牌突出</h3>
            <p>强化品牌展示，适合注重品牌形象的企业</p>
          </div>
          <div class="template-actions">
            <a-button type="primary" @click="previewTemplate('brand')" class="preview-btn">
              <template #icon><EyeOutlined /></template>
              预览
            </a-button>
          </div>
        </div>
      </div>
    </div>

    <div class="templates-footer">
      <p>想要使用这些模板？</p>
      <a href="/auth/login" class="start-btn">立即开始</a>
    </div>

    <!-- 预览弹窗 -->
    <a-modal
      v-model:open="previewVisible"
      :title="`${currentTemplate.name} - 预览`"
      width="600px"
      class="template-preview-modal"
      :footer="null"
    >
      <div class="preview-container">
        <div class="preview-display">
          <!-- 经典商务预览 -->
          <div v-if="currentTemplate.id === 'classic'" class="template-classic preview-template">
            <div class="brand-header">
              <h2 class="company-name">{{ brandName }}</h2>
              <p class="company-slogan">安全便捷的支付体验</p>
            </div>
            <div class="qrcode-wrapper">
              <div class="demo-qrcode-large"></div>
            </div>
            <div class="payment-methods">
              <div class="method-item">
                <div class="method-icon wechat-icon"></div>
                <span>微信支付</span>
              </div>
              <div class="method-item">
                <div class="method-icon alipay-icon"></div>
                <span>支付宝</span>
              </div>
              <div class="method-item">
                <div class="method-icon unionpay-icon"></div>
                <span>云闪付</span>
              </div>
            </div>
          </div>

          <!-- 时尚渐变预览 -->
          <div v-else-if="currentTemplate.id === 'gradient'" class="template-gradient preview-template">
            <div class="gradient-bg">
              <div class="brand-header">
                <h2 class="company-name">{{ brandName }}</h2>
                <p class="company-slogan">创新支付，引领未来</p>
              </div>
              <div class="qrcode-wrapper">
                <div class="qrcode-frame">
                  <div class="demo-qrcode-large"></div>
                </div>
              </div>
            </div>
            <div class="payment-methods gradient-methods">
              <div class="method-item">
                <span class="method-icon">💬</span>
                <span>微信</span>
              </div>
              <div class="method-item">
                <span class="method-icon">💰</span>
                <span>支付宝</span>
              </div>
              <div class="method-item">
                <span class="method-icon">💳</span>
                <span>云闪付</span>
              </div>
            </div>
          </div>

          <!-- 简约现代预览 -->
          <div v-else-if="currentTemplate.id === 'minimal'" class="template-minimal preview-template">
            <div class="minimal-container">
              <div class="brand-section">
                <div class="company-logo">{{ brandName.charAt(0) }}</div>
                <h3 class="company-name">{{ brandName }}</h3>
              </div>
              <div class="qrcode-section">
                <div class="demo-qrcode-large"></div>
              </div>
              <div class="payment-badges">
                <span class="badge wechat">微信</span>
                <span class="badge alipay">支付宝</span>
                <span class="badge unionpay">云闪付</span>
              </div>
            </div>
          </div>

          <!-- 品牌突出预览 -->
          <div v-else-if="currentTemplate.id === 'brand'" class="template-brand preview-template">
            <div class="brand-showcase">
              <div class="brand-banner">
                <div class="brand-logo-large">{{ brandName.substring(0, 2) }}</div>
                <div class="brand-info">
                  <h1 class="brand-title">{{ brandName }}</h1>
                  <p class="brand-tagline">专业支付解决方案</p>
                </div>
              </div>
              <div class="qrcode-area">
                <div class="qr-container">
                  <div class="demo-qrcode-large"></div>
                  <div class="scan-tip">扫码支付</div>
                </div>
              </div>
              <div class="supported-payments">
                <div class="payment-row">
                  <div class="payment-icon wechat-brand">🟢</div>
                  <div class="payment-icon alipay-brand">🔵</div>
                  <div class="payment-icon unionpay-brand">🟠</div>
                </div>
                <p class="support-text">支持微信、支付宝、云闪付</p>
              </div>
            </div>
          </div>
        </div>

        <div class="preview-controls">
          <div class="control-item">
            <label>品牌名称：</label>
            <a-input v-model:value="brandName" placeholder="输入您的品牌名称" style="width: 200px;" />
          </div>
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { EyeOutlined } from '@ant-design/icons-vue'

const previewVisible = ref(false)
const brandName = ref('蒜苔二维码')

// 模板数据
const templates = [
  { id: 'classic', name: '经典商务', description: '专业稳重的商务风格' },
  { id: 'gradient', name: '时尚渐变', description: '现代时尚的渐变设计' },
  { id: 'minimal', name: '简约现代', description: '简洁清爽的现代设计' },
  { id: 'brand', name: '品牌突出', description: '强化品牌展示' }
]

const currentTemplate = ref(templates[0])

// 预览模板
const previewTemplate = (templateId: string) => {
  const template = templates.find(t => t.id === templateId)
  if (template) {
    currentTemplate.value = template
    previewVisible.value = true
  }
}
</script>

<style scoped>
.templates-content {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px;
}

.templates-header {
  text-align: center;
  margin-bottom: 48px;
}

.templates-header h1 {
  font-size: 36px;
  font-weight: 800;
  color: #222;
  margin-bottom: 16px;
  letter-spacing: 2px;
}

.templates-header p {
  font-size: 18px;
  color: #666;
  margin: 0;
}

.templates-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 32px;
  margin-bottom: 48px;
}

.template-card {
  background: white;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.template-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}

.template-preview {
  padding: 24px;
  background: #f8f9fa;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 320px;
  flex-shrink: 0;
}

.demo-template {
  transform: scale(0.7);
  transform-origin: center;
}

.template-info {
  padding: 20px 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  flex: 1;
  justify-content: space-between;
}

.template-info-content {
  flex: 1;
}

.template-info h3 {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin-bottom: 8px;
}

.template-info p {
  font-size: 14px;
  color: #666;
  line-height: 1.5;
  margin: 0;
}

.template-actions {
  display: flex;
  justify-content: center;
  margin-top: 16px;
  flex-shrink: 0;
}

.preview-btn {
  border-radius: 8px;
  font-weight: 500;
}

/* 演示二维码样式 */
.demo-qrcode, .demo-qrcode-large {
  background: linear-gradient(45deg, #333 25%, transparent 25%),
              linear-gradient(-45deg, #333 25%, transparent 25%),
              linear-gradient(45deg, transparent 75%, #333 75%),
              linear-gradient(-45deg, transparent 75%, #333 75%);
  background-size: 8px 8px;
  background-position: 0 0, 0 4px, 4px -4px, -4px 0px;
  border-radius: 4px;
  margin: 0 auto;
}

.demo-qrcode {
  width: 120px;
  height: 120px;
}

.demo-qrcode-large {
  width: 180px;
  height: 180px;
}

.demo-qrcode.small {
  width: 100px;
  height: 100px;
}

.demo-qrcode.mini {
  width: 90px;
  height: 90px;
}

/* 支付方式图标 */
.method-icon {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  margin-bottom: 4px;
}

.wechat-icon {
  background: #07c160;
}

.alipay-icon {
  background: #1677ff;
}

.unionpay-icon {
  background: #ff6900;
}

/* 复用原模板样式 */
.template-classic {
  background: white;
  border-radius: 12px;
  padding: 24px;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  max-width: 240px;
}

.template-classic .brand-header {
  margin-bottom: 20px;
}

.template-classic .company-name {
  font-size: 18px;
  font-weight: 700;
  color: #333;
  margin: 0 0 6px 0;
}

.template-classic .company-slogan {
  font-size: 12px;
  color: #666;
  margin: 0;
}

.template-classic .qrcode-wrapper {
  margin: 16px 0;
  padding: 12px;
  background: #f8f9fa;
  border-radius: 8px;
}

.template-classic .payment-methods {
  display: flex;
  justify-content: space-around;
  margin-top: 16px;
}

.template-classic .method-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}

.template-classic .method-item span {
  font-size: 10px;
  color: #666;
}

.template-gradient {
  max-width: 260px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}

.gradient-bg {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 20px;
  text-align: center;
  color: white;
}

.template-gradient .company-name {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 6px 0;
}

.template-gradient .company-slogan {
  font-size: 11px;
  opacity: 0.9;
  margin: 0 0 16px 0;
}

.template-gradient .qrcode-frame {
  background: white;
  padding: 12px;
  border-radius: 8px;
  display: inline-block;
}

.gradient-methods {
  background: white;
  padding: 16px;
  display: flex;
  justify-content: space-around;
}

.gradient-methods .method-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.gradient-methods .method-icon {
  font-size: 14px;
}

.gradient-methods span:last-child {
  font-size: 10px;
  color: #666;
}

.template-minimal {
  max-width: 220px;
}

.minimal-container {
  background: white;
  border-radius: 8px;
  padding: 20px;
  text-align: center;
  border: 1px solid #e8e8e8;
}

.brand-section {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 16px;
}

.company-logo {
  width: 32px;
  height: 32px;
  background: #1890ff;
  color: white;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
}

.template-minimal .company-name {
  font-size: 14px;
  font-weight: 600;
  color: #333;
  margin: 0;
}

.qrcode-section {
  margin: 16px 0;
}

.payment-badges {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 16px;
}

.badge {
  padding: 3px 6px;
  border-radius: 10px;
  font-size: 9px;
  font-weight: 500;
}

.badge.wechat {
  background: #e6f7e6;
  color: #52c41a;
}

.badge.alipay {
  background: #e6f7ff;
  color: #1890ff;
}

.badge.unionpay {
  background: #fff7e6;
  color: #fa8c16;
}

.template-brand {
  max-width: 280px;
}

.brand-showcase {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.brand-banner {
  background: linear-gradient(135deg, #ff6b6b 0%, #feca57 100%);
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: white;
}

.brand-logo-large {
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
}

.brand-title {
  font-size: 14px;
  font-weight: 700;
  margin: 0 0 3px 0;
}

.brand-tagline {
  font-size: 10px;
  opacity: 0.9;
  margin: 0;
}

.qrcode-area {
  padding: 20px 16px;
  text-align: center;
}

.qr-container {
  display: inline-block;
}

.scan-tip {
  margin-top: 8px;
  font-size: 10px;
  color: #666;
}

.supported-payments {
  padding: 12px 16px;
  background: #f8f9fa;
  text-align: center;
  border-top: 1px solid #f0f0f0;
}

.payment-row {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 6px;
}

.payment-icon {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
}

.support-text {
  font-size: 9px;
  color: #666;
  margin: 0;
}

.templates-footer {
  text-align: center;
  padding: 32px 0;
  background: #f8f9fa;
  border-radius: 12px;
}

.templates-footer p {
  font-size: 18px;
  color: #666;
  margin-bottom: 20px;
}

.start-btn {
  display: inline-block;
  background: linear-gradient(90deg, #1890ff 0%, #52c41a 100%);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  padding: 12px 32px;
  border-radius: 32px;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(24,144,255,0.12);
  transition: background 0.2s;
}

.start-btn:hover {
  background: linear-gradient(90deg, #52c41a 0%, #1890ff 100%);
}

/* 预览弹窗样式 */
.template-preview-modal :deep(.ant-modal-content) {
  border-radius: 16px;
}

.preview-container {
  text-align: center;
}

.preview-display {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 400px;
  background: #f8f9fa;
  border-radius: 12px;
  margin-bottom: 24px;
}

.preview-template {
  transform: scale(1);
  margin: 20px;
}

.preview-template .demo-qrcode-large {
  width: 180px;
  height: 180px;
}

.preview-controls {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

.control-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.control-item label {
  font-weight: 500;
  color: #333;
}

@media (max-width: 768px) {
  .templates-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .templates-header h1 {
    font-size: 28px;
  }

  .demo-template {
    transform: scale(0.6);
  }

  .preview-template {
    transform: scale(0.8);
  }
}
</style>